.container {
  background-color: #f6f6f6;
  min-height: 100vh;
  position: relative;
}

.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
 
 background: url('http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/background.jpg'); 
   .trasnicon{
	  transform: rotate(180deg);
  }
  .nav-content {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: transparent;
    
    .left-area {
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 20px;
        color: #333;
        margin-right: 8px;
      }
      
      .nav-title {
        font-size: 16px;
        color: #333;
        font-weight: 500;
      }
    }
    
    .right-area {
      display: flex;
      align-items: center;
      
      .icon-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
        
        .iconfont {
          font-size: 20px;
          color: #333;
        }
      }
      
      .share-btn {
        background: #f5f5f5;
        border-radius: 50%;
      }
    }
  }
}

.banner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 110px;
  padding: 0 12px;
  margin-bottom: 8px;
  
  image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}

.category-list {
  position: relative;
  z-index: 1;
  padding: 0 12px;
	 
 .icon{
	   position: absolute;  /* 绝对定位 */
	     top: 0;              /* 定位到父容器的顶部 */
	     right: 0;            /* 定位到父容器的右侧 */
		padding: 0 6rpx;	 
		width: 92.44rpx;
	    height: 33.14rpx;
	    background: linear-gradient(146deg,#ff6a6a 7%, #ff8e8e 85%);
	    border-radius: 0rpx 10.47rpx 0rpx 10.47rpx;
		.icon-info{
			display: flex;
			line-height: 33.14rpx;
			font-size: 13.95rpx;
			font-family: Segoe UI, Segoe UI-Semibold;
			font-weight: 600;
			text-align: left;
			color: #ffffff;
			text{
				font-size: 22rpx;
				margin-right: 12.1rpx;
			}
		}
 }
 
  .category-item {
	    position: relative;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 10px;
    display: flex;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16); 
	.category-image {
		width: 146.51rpx;
		height: 230.23rpx;
		background: rgba(0,0,0,0.00);
		margin-right: 20rpx;
		 border-radius: 10rpx;
	}
	.category-box{
		flex: 1;
			 margin-left:17rpx ;
	}
    .category-header {
		
		  white-space: nowrap; /* 不换行 */
		  overflow: hidden; /* 超出部分隐藏 */
		  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
		width: 376.74rpx;
		height: 38.37rpx;
		
		color: #000000;
    
      align-items: center;
     margin-bottom: 15.7rpx;
      
      .category-title {
       font-size: 29.65rpx;
       font-family: Segoe UI, Segoe UI-Semibold;
       font-weight: 600;
       text-align: left;
      }
      
     
    }
  }
}

.shop-list {
	display: flex;
	 overflow-x: auto;
	 width: 100%;
	

  .shop-item {
    
  
    
    
    .image {
		position: relative;
    
    background: rgba(0,0,0,0.00);
      border-radius: 8px;
      margin-right: 12px;
	  .shop-image{
		  width: 115.12rpx;
		  height: 113.37rpx;
	  }
	  .icon{
	  	   position: absolute;  
	  	             
	  		right: 8rpx; 
	  		top: 76.4rpx;
	  		
	  		width: 68.02rpx;
	  		height: 26.16rpx;
			line-height: 26.16rpx;
	  		background: linear-gradient(146deg,#ff6a6a 7%, #ff8e8e 85%);
	  		border-radius: 8.72rpx;
	  		.icon-info{
	  			display: flex;
	  			
	  			height: 27.91rpx;
				line-height: 27.91rpx;
	  			font-size: 20.93rpx;
	  			font-family: Yu Gothic UI, Yu Gothic UI-Regular;
	  			font-weight: 400;
	  			
	  			color: #ffffff;
				
				
	  			.text{
					
	  				width: 45.35rpx;
	  				
	  				font-size: 12rpx;
	  				font-family: Yu Gothic UI, Yu Gothic UI-Regular;
	  				font-weight: 400;
	  			
	  				color: #ffffff;
					margin-left: 5rpx;
	  			}
	  		}
	  }
    }
    
    .shop-info {
		width: 104rpx;
		
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
	  text-align: center;
	  .shop-meta {
	    width: 104.65rpx; /* 父容器宽度 */
	    overflow: hidden; /* 确保内容超出时隐藏 */
	  }
	  
	  .price {
	    height: 22.67rpx;
	    font-size: 17.44rpx;
	    font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Regular;
	    font-weight: 400;
		margin-top:17rpx ;
		margin-bottom:5.23rpx ;
	    color: #646464;
	  }
	  
	  .name {
	    width: 100%; /* 确保占满父容器宽度 */
	    height: 26.16rpx;
	    font-size: 20.93rpx;
	    font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Bold;
	    font-weight: 700;
	   
	    color: #000000;
	  
	    white-space: nowrap; /* 不换行 */
	    overflow: hidden; /* 超出部分隐藏 */
	    text-overflow: ellipsis; /* 使用省略号表示超出部分 */
	  }

      
      
     
    }
  }
}

.page-content {
  position: relative;
  width: 100%;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, #e8f7f3 0%, rgba(232, 247, 243, 0) 100%);
    z-index: 0;
  }
}
.nullBox{
	width: 100%;
	height: 80rpx;
}